<template>
    <div>
        <div class="neirong">
            <div class="parser" v-if="categroyType==1">
                <div v-html="infodata.content"></div>
                <div class="" v-for="(item,index) in files" :key="index">
                    <span>附件：</span>
                    <a :href="link+item.link" target="_blank" rel="noopener noreferrer">{{ item.name }}</a>
                </div>
            </div>
    
            <div class="list-nav" v-if="categroyType==0">
              <div class="item acea-row row-between row-middle cursor" v-for="(item,index) in contentlist" :key="index" @click.stop="getinfo(item)">
                <div class="acea-row row-middle ">
                  <div class="wenzhang-left-icon">
                    <img class="imgwh" src="https://gbadmin.xinghan.vip/adminapi/profile/pic/wenzhang-left-icon.png" alt="">
                  </div>
                  <div class="wenben ellipsis" v-if="type==3">{{ item.portalArticle.name }}</div>
                  <div class="wenben ellipsis" v-else>{{ item.name }}</div>

                </div>
                <div class="time-day">{{ item.year }}-{{ item.month }}-{{ item.day }}</div>
              </div>
            </div>

          </div>
          <template v-if="categroyType==0">
            <div style="width:100%;height:50px;"></div>
            <Pagination
                :pageNo="pageNo"
                :pageSize="10"
                :total="total"
                :continues="5"
                :screenWidth="screenWidth" 
                @getPageNo="getPageNo"
            />
            <div style="width:100%;height:50px;"></div>
          </template>

    </div>
</template>
<script>
  import Pagination from './PaginaTion.vue'

    export default{
        name:'ContentFrom',
        props:["articleId","screenWidth","list","categroyType"],
        components:{
          Pagination
        },
        data(){
            return {
              link: localStorage.getItem('link'),
              pageNo:1,
              total:'',
              type : this.$route.query.type || 0,
              files:[],
              infodata:[],
              contentlist:null,
              
            }
        },
        watch: {
          // 监听路由对象中的变化
          '$route': {
            handler: function (to, from) {
              // 路由发生变化时触发的操作
              if( this.type == 3 ){
                this.getdongtai();
              }else{
                if( this.categroyType==1 ){
                  this.getdetail();
                }else{
                  this.getdata();
                }
              }
            },
            // 设置为深度监听
            deep: true
          }
        },
        mounted(){
          if( this.type == 3 ){
            this.getdongtai();
          }else{
            if( this.categroyType==1 ){
              this.getdetail();
            }else{
              this.getdata();
            }
          }
        },
        methods:{
          getdetail(){
            let that = this;
            this._get('/api/portal/web/article/detail',{ id:that.articleId }).then(res=>{
              that.infodata = res.data.data;
                    let files = res.data.data.files;
                    let array = {
                        link:'',
                        name:''
                    }
                    let srt = [] , arr=[];
                    if( files !='' || files != null ){
                        arr = files.includes(',') ? files.split(",") : files;
                        srt.push(arr)
                        srt.forEach(item=>{
                            if( item.lastIndexOf("/")>-1 ){
                                array.link = item;
                                array.name = item.slice(item.lastIndexOf("/")+1);
                                that.files.push(array)
                            }
                        })
                    }
            })
          },
          getdongtai(){
            let that = this;
            this._get('/api/portal/web/dynamicArticle/list',{
              pageSize:10,
              pageNum: that.pageNo,
              orderByColumn:'sort_num,publish_time',
              isAsc:'desc'
            }).then(res=>{
              that.contentlist = res.data.rows;
              that.total = res.data.total;
            })
          },
          getinfo(item){
            let that = this;
            that.$router.push({ path:`/info?id=${item.id}&type=${that.type}` },()=>{}, ()=>{})
          },
          getPageNo(pageNo){
            this.pageNo = pageNo;
            if( this.type == 3 ){
              this.getdongtai();
            }else{
              this.getdata();
            }
          },
          getdata(){
            let that = this;
            that._get('/api/portal/web/article/list',{
              cid: this.$route.query.tid,
              pageSize:10,
              pageNum: that.pageNo,
              orderByColumn:'sort_num,publish_time',
              isAsc:'desc'
            }).then(res=>{
              that.contentlist = res.data.rows;
              that.total = res.data.total;
            })
          },
        }
    }
</script>
<style lang="scss" scoped>

    .neirong{
        width: 65%;
        margin: 0 auto;
        
        .subtitle{
          color: #343434;
          font-size: 22px;
          line-height: 58px;
          margin-top: 30px;
        } 

        .list-nav{
          margin-top: 30px;
      
          .item:last-child{
            border: none;
          }
          .item{
            border-bottom: 1px dashed #907E4C;
            padding: 20px 0;
            color: #333333;
            font-size: 22px;
      
            .wenzhang-left-icon{
              width: 22px;
              height: 22px;
            }
      
            .wenben{
             width: 80%;
              margin-left: 20px;
            }
      
          }
      
        }

        .parser{
          width: 65%;
          min-height: 800px;
          margin: 30px auto;
          text-align: center;

          ::v-deep img{
            width:100%;
            height: auto;
          }

      }

    }

    @media screen and (max-width: 576px) {

      .neirong{
        width: 90%;
        padding: 10px;

        .subtitle{
          font-size: 12px;
          line-height: 30px;
          margin-top: 10px;
        }

        .list-nav{
          //width: 90%;

          .item:last-child{
            border-bottom: 1px dashed #907E4C;
          }
          .item{

            .wenben{
              width: 70%;
               font-size: 14px;
             }
             .time-day{
               font-size: 12px;
               color: #999999;
               margin: 20px 0 0 40px;
             }

          }

        }

        .parser{
          width: 90%;
      }

      }
      
    }


</style>